<template>
  <div class="about">
     <!--搜索-->
        <el-row>
            <!--汽车类型下拉框-->
            <el-col :span="3"><el-select v-model="typeName" clearable placeholder="请选择类型" @change="changeType">
                <el-option
                v-for="item in typeNames"
                :key="item.id"
                :label="item.typeName"
                :value="item.id">
                </el-option>
            </el-select></el-col>
            <!--汽车品牌下拉框-->
            <el-col :span="3"><el-select v-model="brandName" clearable placeholder="请选择品牌" @change="changeBrand">
                <el-option
                v-for="item in brandNames"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select></el-col>
            <!--汽车配置下拉框-->
            <el-col :span="3"><el-select v-model="configName" clearable placeholder="请选择配置" @change="changeConfig">
                <el-option
                v-for="item in configNames"
                :key="item.id"
                :label="item.typename"
                :value="item.id">
                </el-option>
            </el-select></el-col>
            <!--汽车门店下拉框-->
            <el-col :span="3"><el-select v-model="shopName" clearable placeholder="请选择门店" @change="changeShop">
                <el-option
                v-for="item in shopNames"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select></el-col>
            <el-col :span="3"><el-input v-model="carname" size="mini" placeholder="请输入汽车名称"></el-input></el-col>
            <el-col :span="3"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    ref="filterTable"
                    :data="tableData"
                    style="width: 100%"
                    height="450px">
                    <!-- 详细信息 -->
                <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="汽车编号">
                        <span>{{ props.row.id}}</span>
                    </el-form-item>
                    <el-form-item label="汽车名称">
                        <span>{{ props.row.carname }}</span>
                    </el-form-item>
                    <el-form-item label="类型">
                        <span>{{ props.row.typeName }}</span>
                    </el-form-item>
                    <el-form-item label="品牌">
                        <span>{{ props.row.brandName }}</span>
                    </el-form-item>
                    <el-form-item label="配置">
                        <span>{{ props.row.configName }}</span>
                    </el-form-item>
                    <el-form-item label="车辆识别码">
                        <span>{{ props.row.vin}}</span>
                    </el-form-item>
                    <el-form-item label="购买价钱">
                        <span>{{ props.row.buyPrice }}</span>
                    </el-form-item>
                    <el-form-item label="购买时间">
                        <span>{{ props.row.addtimeStr }}</span>
                    </el-form-item>
                    <el-form-item label="起步价">
                        <span>{{ props.row.price }}</span>
                    </el-form-item>
                    <el-form-item label="保险">
                        <span>{{ props.row.insuranceName }}</span>
                    </el-form-item>
                    <el-form-item label="简介">
                        <span>{{ props.row.intro }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
                <!-- 表格显示 -->
                <el-table-column
                        prop="id"
                        label="汽车编号"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="carname"
                        label="汽车名称">
                </el-table-column>
                <!-- typeName;insuranceName;shopName;configName;brandName; -->
                <el-table-column
                        prop="typeName"
                        label="类型">
                </el-table-column>
                <el-table-column
                        prop="brandName"
                        label="品牌">
                </el-table-column>
                <el-table-column
                        prop="configName"
                        label="配置">
                </el-table-column>
                <el-table-column
                        prop="vin"
                        label="车辆识别码">
                </el-table-column>
                <!-- <el-table-column
                        prop="buyPrice"
                        label="买的价钱">
                </el-table-column> -->
                <el-table-column
                        prop="shopName"
                        label="门店">
                </el-table-column>
                <el-table-column
                        label="车辆状态">
                        <!-- <template slot-scope="scope">
                            <p v-if="scope.row.state==1">可租</p>
                            <p v-if="scope.row.state==2">维修中</p>
                            <p v-if="scope.row.state==3">租出</p>
                            <p v-if="scope.row.state==4">报废</p>
                             @change='changeStatus($event,scope.row.status,scope.row.userId)'
                        </template> -->
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.state" placeholder="请选择" @change='carUpdateRecord($event,scope.row.state,scope.row.id)'>
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价钱">
                </el-table-column>
                <!-- <el-table-column
                        prop="addtimeStr"
                        label="购买时间">
                </el-table-column> -->
                <el-table-column
                        prop="insuranceName"
                        label="保险">
                </el-table-column>
                <el-table-column
                        prop="intro"
                        label="简介">
                </el-table-column>
                <el-table-column label="操作" width="280px" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="info"
                                class="el-icon-edit"
                                @click="handleUpdate(scope.$index, scope.row)">维修</el-button>
                        <!-- <el-button
                                size="mini"
                                type="info"
                                @click="handleAddInsurance(scope.$index, scope.row)">保险</el-button> -->
                        <!-- <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <!--添加和更新 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="车辆名称" prop="carname">
                        <el-input v-model="form.carname" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-select v-model="form.type" clearable @change="proA" placeholder="请选择汽车类型" size=mini>
                            <el-option
                            v-for="item in typeNames"
                            :key="item.id"
                            :label="item.typeName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="品牌" prop="brandId">
                        <el-select v-model="form.brandId" clearable @change="proA" placeholder="请选择汽车品牌" size=mini>
                            <el-option
                            v-for="item in brandNames"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置" prop="configId">
                        <el-select v-model="form.configId" clearable @change="proA" placeholder="请选择汽车配置" size=mini>
                            <el-option
                            v-for="item in configNames"
                            :key="item.id"
                            :label="item.typename"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="门店" prop="shopId">
                        <el-select v-model="form.shopId" clearable @change="proA" placeholder="请选择汽车门店" size=mini>
                            <el-option
                            v-for="item in shopNames"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="保险" prop="insuranceId">
                        <el-select v-model="form.insuranceId" clearable @change="proA" placeholder="请选择汽车保险" size=mini>
                            <el-option
                            v-for="item in insuranceNames"
                            :key="item.id"
                            :label="item.companyName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆状态" prop="state"><!--(可租1，维修中2，租出3，删除4)"-->
                        <el-select v-model="form.state" placeholder="请选择车辆状态">
                        <el-option label="可租" :value="1"></el-option>
                        <el-option label="维修中" :value="2"></el-option>
                        <el-option label="租出" :value="3"></el-option>
                        <el-option label="报废" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆识别码" prop="vin">
                        <el-input v-model="form.vin" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="购买价格" prop="buyPrice">
                        <el-input v-model="form.buyPrice" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="价钱" prop="price">
                        <el-input v-model="form.price" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" prop="intro">
                        <el-input v-model="form.intro" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdate('form')">确 定</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </div>
            </el-dialog>
        </el-row>
        <!--汽车维修添加 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogRecord">
                <el-form :model="forms">
                    <el-form-item label="车辆名称(id)" >
                        <el-input v-model="forms.carId" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="维修厂" >
                        <el-input v-model="forms.maintainShopId" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="维修厂">
                        <el-select v-model="forms.maintainShopId" clearable @change="maint" placeholder="请选择汽车维修厂" size=mini>
                            <el-option
                            v-for="item in nameIs"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="费用" >
                        <el-input v-model="forms.amount" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="评论" >
                        <el-input v-model="forms.remark" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogRecord = false">取 消</el-button>
                    <el-button type="primary" @click="addOrRecord">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
export default {
      data() {
          //验证车辆识别码
          var chechVin = (rule,value,callback) =>{
                const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                    if (!value) {
                        return callback(new Error('请填写车辆识别码！'))
                    } else if (!reg.test(value)) {
                        return callback(new Error('请填写正确的车辆识别码！'))
                    }else{
                        callback()
                    }
                    };
           //验证车辆价钱
          var chechPrice = (rule,value,callback) =>{
                const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                    if (!value) {
                        return callback(new Error('请填写车辆价钱！'))
                    } else if (!reg.test(value)) {
                        return callback(new Error('请填写正确的车辆价钱！'))
                    }else{
                        callback()
                    }
                    };
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                carname:'',//查询功能
                typeNames:[],//类型名称
                typeName:'',
                brandNames:[],//品牌名称
                brandName:'',
                configNames:[],//配置名称
                configName:'',
                shopNames:[],//门店名称
                shopName:'',
                insuranceNames:[],
                dialogFormVisible:false,
                dialogRecord:false,
                title:'车辆添加',
                form:{},
                forms:{},
                options: [{
                        value: 1,
                        label: '可租'
                        }, {
                        value: 2,
                        label: '维修中'
                        }, {
                        value: 3,
                        label: '租出'
                        }, {
                        value: 4,
                        label: '报废'
                    }],
                    arrayType:[],
                rules: {
                carname: [
                    { required: true, message: '请输入车辆名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择汽车类型', trigger: 'change' }
                ],
                brandId: [
                    { required: true, message: '请选择汽车品牌', trigger: 'change' }
                ],
                configId: [
                    { required: true, message: '请选择汽车配置', trigger: 'change' }
                ],
                shopId: [
                    { required: true, message: '请选择汽车门店', trigger: 'change' }
                ],
                insuranceId: [
                    { required: true, message: '请选择汽车保险', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择汽车状态', trigger: 'change' }
                ],
                vin: [{ required: true, validator: chechVin, trigger: 'blur' }],
                price: [
                   { required: true, validator: chechPrice, trigger: 'blur' }
                ],
                intro: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ],
                }
        }
      },
       created:function(){
               //初始化
                this.loadData();
                //初始化汽车类型下拉查询
                this.loadDataType();
                //初始化汽车品牌下拉查询
                this.loadDataBrand();
                //初始化汽车配置下拉查询
                this.loadDataConfig();
                //初始化汽车门店下拉查询
                this.loadDataShop();
            },
            methods:{
                proA(){},
                //下拉查询方法
                //加载汽车详情数据
                loadData(){
                   //获取数据
                          this.$http.post("/api/cars/car/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            carname:this.carname,
                                            type:this.typeName,
                                            brandId:this.brandName,
                                            configId:this.configName,
                                            shopId:this.shopName,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                              }
                                })  
                        
                },
                //加载汽车类型数据(汽车详情显示使用) 
                loadDataType(){
                   //获取数据
                          this.$http.post("/api/cars/carType/queryAlls",{
                                            carname:this.type,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.typeNames = response.data.data;
                                              }
                                })  
                        
                },
                //加载品牌数据(汽车详情显示使用) 
                loadDataBrand(){
                   //获取数据
                          this.$http.post("/api/cars/brand/queryAlls",{
                                            carname:this.carname,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.brandNames = response.data.data;
                                              }
                                })  
                        
                },
                //加载配置数据(汽车详情显示使用) 
                loadDataConfig(){
                   //获取数据
                          this.$http.post("/api/cars/carTypeConfigDetails/queryAlls",{
                                            carname:this.carname,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.configNames = response.data.data;
                                              }
                                })  
                        
                },
                //加载门店数据(汽车详情显示使用) 
                loadDataShop(){
                   //获取数据
                          this.$http.post("/api/cars/shop/queryAlls",{
                                            carname:this.carname,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.shopNames = response.data.data
                                              }
                                })  
                        
                },
                //加载门店保险(汽车详情添加修改下拉框使用)
                loadDataInsurance(){
                   //获取数据
                          this.$http.post("/api/cars/carInsurance/queryAlls",{
                                            carname:this.carname,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.insuranceNames = response.data.data
                                              }
                                })  
                        
                },
                //加载维修厂数据(汽车维修记录添加时下拉框使用)
                maintainShopvar(){
                   //获取数据
                          this.$http.post("/api/cars/maintainShop/queryAlls",{
                                            carname:this.carname,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.nameIs = response.data.data
                                              }
                                })  
                        
                },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                   /* axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize: this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                    /*axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize:this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //查询方法
                search(){
                   this.loadData();
                },
                //根据汽车类型下拉查询方法
                changeType(){
                   this.loadData();
                },
                //根据汽车品牌下拉查询方法
                changeBrand(){
                    // console.log("********************");
                    // console.log(this.brandName);
                   this.loadData();
                },
                //根据汽车配置下拉查询方法
                changeConfig(){
                   this.loadData();
                },
                //根据汽车门店下拉查询方法
                changeShop(){
                   this.loadData();
                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="汽车添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                    //初始化汽车保险下拉查询(汽车详情添加使用)
                    this.loadDataInsurance();
                },
                 carUpdateRecord($event,state,id){                     
                     //定义成jsons数据
                     console.log(state);
                     console.log(id);
                    var jsons = {
                        state:state,
                        id:id
                    }
                    var _this=this;
                    this.$http({
                        url:'/api/cars/car/update',
                        method:'post',
                        data:jsons,
                        header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                    })
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出层
                                _this.dialogRecprd=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                    
                                });      
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });   
                },
                //处理汽车维修记录添加
                handleUpdate(index,row){
                    //清空原来form
                    this.forms={};
                    this.forms.carId=row.id;
                    //更新显示名称
                    this.title="汽车维修记录添加";
                    //对话框显示
                    this.dialogRecord=true;
                    //初始化汽车维修厂
                    this.maintainShopvar();
                },
                //处理编辑（弹出汽车更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    //{deptNo:10,dname:'ACCOUNTING',loc:'纽约'}
                    this.form=JSON.parse(JSON.stringify(row));
                    this.form=row;
                    //更新显示名称
                    this.title="汽车更新";
                    //对话框显示
                    this.dialogFormVisible=true;
                    //初始化汽车保险下拉查询(汽车详情修改使用)
                    this.loadDataInsurance();


                },

                //提交表单数据（添加或者更新）
                addOrUpdate(formName){
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                    var  url ='/api/cars/car/update';
                    if(this.form.id==''||this.form.id==null){
                        url="/api/cars/car/insert"
                    }
                   var _this=this;
                    //提交方法
                    this.$http.post(url, this.form)
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出框
                                _this.dialogFormVisible=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                        });

                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                //汽车维修记录添加
                addOrRecord(){
                    var  url="/api/cars/maintainRecord/insert";
                    var _this=this;
                    //提交方法
                    this.$http.post(url, this.forms)
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出框
                                _this.dialogRecord=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                },
                //处理删除（ 汽车删除）
                handleDelete(index, row) {
                    console.log(index, row);
                   var _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                        this.$http.delete('/api/cars/car/deleteById?id='+row.id)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                }
            }
    }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: rgb(62, 150, 209);
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
